import { defineComponent } from "vue";
import { searchProps } from "./types";
import { getSize } from "@/command/apiTool";
import search from "./asset/search.png";
export default defineComponent({
  name: "search",
  props: searchProps,
  emits: ["update:modelValue"],
  setup(props, { emit }) {
    return () => {
      return (
        <div class={" bg-white px-[16px] flex items-center justify-center"}>
          <div
            style={{ border: "1px solid #F5F5F5", borderRadius: getSize(16) }}
            class={
              "w-full  px-[16px] flex items-center bg-[#F5F5F5] rounded-20 h-[32px]"
            }
          >
            <img src={search} class="w-[16px] h-[16px]" />
            <input
              class={
                "flex flex-1 bg-transparent ml-3 placeholder:text-[12px] placeholder:text-[#999999] items-center text-[12px]"
              }
              value={props.modelValue}
              onInput={(data: any) => {
                emit("update:modelValue", data.target.value);
              }}
              placeholder={props.placeholder || "请输入搜索内容"}
            />
          </div>
        </div>
      );
    };
  },
});
